<template>
  <!-- 蒙层 -->
  <!-- <view clas="c-mask" v-if="showInputPop" class="c-mask" @click.stop="emit('closeInputPop')"
        @touchmove.stop.prevent="emit('disableScroll')">
    </view> -->
  <view class="popup-comment" v-if="showInputPop">
    <view class="comment-input-wrap">
      <view class="dispaly-just-between">
        <view
          class="comment-textarea-box"
          @touchmove.stop.prevent="emit('disableScroll')"
        >
          <textarea
            auto-height
            confirm-type="send"
            @confirm="commentCommit"
            v-model="commentParams.content"
            class="comment-textarea"
            :maxlength="600"
            :focus="replyFocus"
            :placeholder="customPlaceholder"
            :show-confirm-bar="false"
            @focus="commentInputFocus"
            @blur="commentInputBlur"
            :adjust-position="true"
            :cursor-spacing="400"
            :cursor="cursorIndex"
            @input="inputFocusChange"
            :fixed="true"
          />
          <!-- <view class="limit">{{ commentParams.content?.length || 0 }} / 600</view> -->
        </view>
        <view class="relase-btn" v-if="!inputSureShow">
          <!-- 表情 和 图片 -->
          <view class="emoji-image">
            <!-- 选择上传图片 -->
            <view
              class="as-image icon-a-44tubiao-81"
              hover-class="checkActive"
              :hover-stay-time="100"
              @click="selectOption"
            >
              <image
                src="/static/icon/add1.svg"
                style="width: 50rpx; height: 50rpx"
              />
            </view>
            <!-- 表情 -->
            <view
              class="emoji icon-biaoqing-xue"
              hover-class="checkActive"
              :hover-stay-time="100"
              @click="openEmoji"
              v-if="!showEmoji"
            >
              <image
                src="/static/icon/emj1.svg"
                style="width: 50rpx; height: 50rpx"
              />
            </view>
            <!-- 键盘 -->
            <view
              v-else
              class="keyboard k icon-a-44tubiao-155"
              hover-class="checkActive"
              :hover-stay-time="100"
              @click="openKeyboard"
            >
              <image
                src="/static/icon/key.svg"
                style="width: 60rpx; height: 60rpx; margin-right: 15rpx"
              />
            </view>
          </view>
        </view>
        <view v-else>
          <view class="sure-send-message" @click="commentCommit">发送</view>
        </view>
      </view>
      <view class="image-list">
        <view
          class="image-item"
          v-for="(item, index) in commentImages"
          :key="index"
        >
          <image
            class="image"
            :src="item"
            mode="aspectFill"
            @click.stop="previewCommentImage(item)"
          ></image>
          <uni-icons
            class="icon-close"
            @click.stop="deleteOneCommentImage(index)"
            type="clear"
            size="20"
            color="#red"
          ></uni-icons>
        </view>
      </view>

      <list class="emoji-data" :show-scrollbar="false" v-if="showEmoji">
        <view
          v-for="(item, index) in emojiDataList"
          :key="index"
          class="emoji-item"
          hover-class="checkActive"
          :hover-stay-time="100"
          @click.stop="tuchCurrentEmoji(item)"
        >
          <text class="emoj_conn">{{ item }}</text>
        </view>
      </list>

      <list class="emoji-data" :show-scrollbar="false" v-if="showOption">
        <view class="option-box dispaly-center">
          <view class="option-item dispaly-col-center" @click="upload">
            <view class="icon-box dispaly-align-center">
              <image src="/static/icon/pictrue.svg" />
            </view>
            <view class="option-name">照片</view>
          </view>
          <view
            class="option-item dispaly-col-center"
            @click="uploadChooseVideo"
          >
            <view class="icon-box dispaly-align-center">
              <image src="/static/icon/video.svg" />
            </view>
            <view class="option-name">视频</view>
          </view>
        </view>
      </list>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick, watch } from "vue";
import { uploadImage, chooseVideo } from "@/utils/util";

const props = defineProps({
  showInputPop: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits([
  "closeInputPop",
  "disableScroll",
  "update:showInputPop",
  "send",
  "sendImage",
  "sendVideo",
]);

// 上传图片
const upload = async () => {
  const res = await uploadImage(1);
  if (res.length) {
    emit("sendImage", res);
    showOption.value = false;
  }
};

// 上传视频
const uploadChooseVideo = async () => {
  const res = await chooseVideo();
  if (res.length) {
    emit("sendVideo", res);
    showOption.value = false;
  }
};

// 新增评论入参
const commentParams = ref({ content: "" } as any);
// 评论上传的图片
const commentImages = ref<string[]>([]);

// 点击回复控制textarea的聚焦
const replyFocus = ref(false);
// 默认的提示内容
const customPlaceholder = ref<string>("说点什么...");
// 是否显示表情包
const showEmoji = ref(false);
// 是否显示操作
const showOption = ref(false);

// 表情包列表

const emojiDataList = ref([
  "🤞",
  "👍",
  "👏",
  "❤",
  "😁",
  "🖐",
  "😀",
  "😃",
  "😄",
  "😁",
  "😆",
  "😅",
  "😂",
  "🤣",
  "😊",
  "😇",
  "🙂",
  "🙃",
  "😉",
  "😌",
  "😍",
  "🥰",
  "😘",
  "😗",
  "😙",
  "😚",
  "😋",
  "😛",
  "😝",
  "😜",
  "🤪",
  "🤨",
  "🧐",
  "🤓",
  "😎",
  "🤩",
  "🥳",
  "😏",
  "😒",
  "😞",
  "😔",
  "😟",
  "😕",
  "🙁",
  "😣",
  "😖",
  "😫",
  "😩",
  "🥺",
  "😢",
  "😭",
  "😤",
  "😠",
  "😡",
  "🤬",
  "🤯",
  "😳",
  "🥵",
  "🥶",
  "😱",
  "😨",
  "😰",
  "😥",
  "😓",
  "🤗",
  "🤔",
  "🤭",
  "🤫",
  "🤥",
  "😶",
  "😐",
  "😑",
  "😬",
  "🙄",
  "😯",
  "😦",
  "😧",
  "😮",
  "😲",
  "😴",
  "🤤",
  "😪",
  "😵",
  "🤐",
  "🥴",
  "🤢",
  "🤮",
  "🤧",
  "😷",
  "🤒",
  "🤕",
  "🤑",
  "🤠",
  "👻",
  "🐧",
]);

// 打开操作
const selectOption = () => {
  showOption.value = true;
  showEmoji.value = false;
};

// 记录当前光标位置
const cursorIndex = ref(0);
// 评论时鼠标光标 的位置
const cursorInputIndex = ref(-1);
// 评论框打开
const inputFocus = (type: number, e?: any) => {
  nextTick(() => {
    replyFocus.value = true;
    cursorIndex.value = cursorInputIndex.value;
    // 如果是根评论（当前文章直接评论而不是回复别人的评论）
    if (type === 1) {
      customPlaceholder.value = "输入评论";
      commentParams.value.pCode = "";
    } else {
      // 如果是回复评论
      if (e) {
        commentParams.value.pCode = e.code;
        customPlaceholder.value = `回复${e.nickname}`;
      }
    }
  });
};

// 评论框聚焦
const commentInputFocus = (event: any) => {
  replyFocus.value = true;
  showEmoji.value = false;
  showOption.value = false;
};
// 评论失焦
const commentInputBlur = (event: any) => {
  cursorInputIndex.value = event.detail.cursor;
  replyFocus.value = false;
};
// 选中表情
const tuchCurrentEmoji = (item: string) => {
  if (cursorInputIndex.value > 0) {
    const start = commentParams.value.content?.substring(
      0,
      cursorInputIndex.value
    );
    const end = commentParams.value.content?.substring(
      cursorInputIndex.value,
      commentParams.value.content?.length
    );
    commentParams.value.content = start + item + end;
  } else {
    commentParams.value.content += item;
  }
  cursorInputIndex.value += item?.length;
};
// 输入时光标的位置
const inputSureShow = ref(false);
const inputFocusChange = (event: any) => {
  if (event.detail.cursor > 0) {
    inputSureShow.value = true;
  } else {
    inputSureShow.value = false;
  }
  cursorInputIndex.value = event.detail.cursor;
};

// 预览评论的图片
const previewCommentImage = (image: string) => {
  uni.previewImage({
    current: image,
    urls: commentImages.value,
  });
};

// 删除某一张评论图片
const deleteOneCommentImage = (index: number) => {
  commentImages.value.splice(index, 1);
};

// 选择上传媒体相册中的图片 uniapp的方法
const selectMediaImage = async () => {
  const res = (await uploadImage(20, "album", "duo")) as string[];
  commentImages.value = res;
};

// 打开表情包
const openEmoji = () => {
  replyFocus.value = false;
  showEmoji.value = true;
  showOption.value = false;
};

// 打开键盘
const openKeyboard = () => {
  showEmoji.value = false;
  replyFocus.value = true;
};

const closeInputPop = () => {
  replyFocus.value = false;
  emit("update:showInputPop", false);
  commentParams.value.pCode = "";
};

// 提交评论
const commentCommit = async () => {
  commentParams.value.content = commentParams.value.content?.trim();
  //  || !commentImages.value.length
  if (!commentParams.value.content.length) {
    uni.showToast({
      title: "不能发送空消息",
      icon: "none",
    });
  } else {
    emit("send", {
      imgList: commentImages.value,
      content: commentParams.value.content,
    });
    commentImages.value = [];
    commentParams.value.content = "";
    showEmoji.value = false;
    showOption.value = false;
    inputSureShow.value = false;
  }
};
defineExpose({
  inputFocus,
});
</script>

<style lang="scss">
.option-box {
  .option-item:first-child {
    margin-right: 48rpx;
  }

  .option-item {
    .icon-box {
      width: 128rpx;
      height: 128rpx;
      border-radius: 32rpx;
      background: #eeeeee;

      image {
        width: 56rpx;
        height: 44rpx;
      }
    }

    .option-name {
      margin-top: 20rpx;
      font-family: PingFang SC Medium;
      font-size: 24rpx;
      color: #4b4b4b;
    }
  }
}

.c-mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-comment {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  background-color: #fff;

  .comment-input-wrap {
    padding: 20rpx 30rpx;
    display: flex;
    flex-direction: column;

    .comment-textarea-box {
      position: relative;
      margin-right: 20rpx;
      flex: 1;
      .comment-textarea {
        border-radius: 20rpx;
        min-height: 80rpx;
        // width: 523rpx;
        background-color: #f6f6f6;
        font-size: 26rpx;
        padding: 20rpx 20rpx 0 20rpx;
        width: 500rpx;
      }

      .limit {
        // 定位到textarea 的 右下角
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        font-size: 20rpx;
        color: #767676;
      }
    }

    .image-list {
      display: flex;
      flex-wrap: wrap;
      margin: 10rpx 0;

      .image-item {
        position: relative;
        width: 90rpx;
        height: 90rpx;
        margin-right: 10rpx;
        background-color: #fff;

        .image {
          border-radius: 20rpx;
          width: 100%;
          height: 100%;
        }

        .icon-close {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }

    .relase-btn {
      display: flex;
      justify-content: space-between;
      // align-items: center;
      // margin-top: 10rpx;
      flex: 1;

      // padding: 0 20rpx;
      .emoji-image {
        display: flex;
        align-items: center;
        font-size: 48rpx;
        color: #3d3d3d;
        justify-content: center;

        .as-image,
        .emoji {
          margin-right: 15rpx;
        }
      }

      .limit {
        font-size: 24rpx;
        color: #767676;
      }

      .relase {
        background-color: $uni-color-primary;
        border-radius: 10rpx;
        font-size: 26rpx;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10rpx 20rpx;
      }
    }

    .emoji-data {
      display: flex;
      flex-wrap: wrap;
      height: 300rpx;
      overflow: scroll;
      margin-top: 16rpx;

      .emoji-item {
        padding: 10rpx;
      }

      .emoj_conn {
        font-size: 40rpx;
      }
    }
  }
}

.sure-send-message {
  font-size: 30rpx;
  background: #0753fd;
  color: white;
  border: none;
  outline: none;
  width: 120rpx;
  height: 80rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
